<div class="content-section introduction">
    <div>
        <span class="feature-title">Calendar</span>
        <span>Calendar is an input component to select a date.</span>
    </div>
</div>

<div class="content-section implementation">
    <div class="ui-g">
        <div class="ui-g-12 ui-md-4">
            <h3>Basic</h3>
            <p-calendar [(ngModel)]="date1" tabindex="0"></p-calendar> {{date1|date}}
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Spanish</h3>
            <p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy"></p-calendar> {{date2|date}}
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Icon</h3>
            <p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar> <span style="margin-left:35px">{{date3|date}}</span>
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Min-Max</h3>
            <p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar> {{date4|date}}
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Disable Days</h3>
            <p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"></p-calendar> {{date5|date}}
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Navigators</h3>
            <p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date6|date}}
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Time</h3>
            <p-calendar [(ngModel)]="date7" [showTime]="true"></p-calendar> {{date7}}
        </div>
        
        <div class="ui-g-12 ui-md-4">
            <h3>Time Only</h3>
            <p-calendar [(ngModel)]="date8" [timeOnly]="true"></p-calendar>
        </div>
    </div>
    
    <h3>Inline {{date9|date}}</h3>
    <p-calendar [(ngModel)]="date9" [inline]="true"></p-calendar> 
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;CalendarModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Two-way value binding is defined using the standard ngModel directive referencing to a Date property.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="value"&gt;&lt;/p-calendar&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    value: Date;
    
&#125;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>Calendar can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar formControlName="date"&gt;&lt;/p-calendar&gt;
</code>
</pre>

            <h3>Popup and Inline</h3>
            <p>Calendar is displayed in a popup by default and inline property needs to be enabled for inline mode.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="value" [inline]="true"&gt;&lt;/p-calendar&gt;
</code>
</pre>

            <h3>DateFormat</h3>
            <p>Default date format is mm/dd/yy, to customize this use dateFormat property.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"&gt;&lt;/p-calendar&gt;
</code>
</pre>

            <p>Following options can be a part of the format.</p>
            <ul>
    			<li>d - day of month (no leading zero)</li>
    			<li>dd - day of month (two digit)</li>
    			<li>o - day of the year (no leading zeros)</li>
    			<li>oo - day of the year (three digit)</li>
    			<li>D - day name short</li>
    			<li>DD - day name long</li>
    			<li>m - month of year (no leading zero)</li>
    			<li>mm - month of year (two digit)</li>
    			<li>M - month name short</li>
    			<li>MM - month name long</li>
    			<li>y - year (two digit)</li>
    			<li>yy - year (four digit)</li>
    			<li>@ - Unix timestamp (ms since 01/01/1970)</li>
    			<li> ! - Windows ticks (100ns since 01/01/0001)</li>
    			<li>'...' - literal text</li>
    			<li>'' - single quote</li>
    			<li>anything else - literal text</li>
		    </ul>

            <h3>Time</h3>
            <p>TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="value" showTime="showTime" hourFormat="12"&gt;&lt;/p-calendar&gt;
&lt;p-calendar [(ngModel)]="value" showTime="showTime" hourFormat="24"&gt;&lt;/p-calendar&gt;
</code>
</pre>

            <h3>Date Restriction</h3>
            <p>To disable entering dates manually, set readonlyInput to true and to restrict selectable dates use minDate
                and maxDate options.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="dateValue" [minDate]="minDateValue" [maxDate]="maxDateValue" readonlyInput="readonlyInput">&gt;&lt;/p-calendar&gt;
</code>
</pre>

            <h3>Disable specific dates and/or days</h3>
            <p>To disable specific dates or days, set readonlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="dateValue" [disabledDates]="invalidDates" [disabledDays]="[0,6}" readonlyInput="readonlyInput">&gt;&lt;/p-calendar&gt;
</code>
</pre>

            <h3>Localization</h3>
            <p>Localization for different languages and formats is defined by binding the locale settings object to the locale property. Following is the default values for English.
            </p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="dateValue" [locale]="en"&gt;&lt;/p-calendar&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;
    
    en: any;
    
    ngOnInit() &#123;
        this.en = &#123;
            firstDayOfWeek: 0,
            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
        &#125;;
    &#125;
&#125;
</code>
</pre>

            <h3>Custom Content</h3>
            <p>Calendar UI accepts custom content using p-header and p-footer components.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-calendar [(ngModel)]="dateValue"&gt;
    &lt;p-header&gt;Header&lt;/p-header&gt;
    &lt;p-footer&gt;Footer&lt;/p-footer&gt;
&lt;/p-calendar&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>defaultDate</td>
                            <td>Date</td>
                            <td>null</td>
                            <td>Set the date to highlight on first opening if the field is blank.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the focus input to match a label defined for the component.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text for the input.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, disables the component.</td>
                        </tr>
                        <tr>
                            <td>dateFormat</td>
                            <td>string</td>
                            <td>mm/dd/yy</td>
                            <td>Format of the date.</td>
                        </tr>
                        <tr>
                            <td>inline</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, displays the calendar as inline. Default is false for popup mode.</td>
                        </tr>
                        <tr>
                            <td>showOtherMonths</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.</td>
                        </tr>
                        <tr>
                            <td>selectOtherMonths</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.</td>
                        </tr>
                        <tr>
                            <td>showIcon</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, displays a button with icon next to input.</td>
                        </tr>
                         <tr>
                            <td>showOnFocus</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>When disabled, datepicker will not be visible with input focus.</td>
                        </tr>
                        <tr>
                            <td>icon</td>
                            <td>string</td>
                            <td>fa-calendar</td>
                            <td>Icon of the calendar button.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.</td>
                        </tr>
                        <tr>
                            <td>readonlyInput</td>
                            <td>boolean</td>
                            <td>null</td>
                            <td>When specified, prevents entering the date manually with keyboard.</td>
                        </tr>
                        <tr>
                            <td>shortYearCutoff</td>
                            <td>string</td>
                            <td>+10</td>
                            <td>The cutoff year for determining the century for a date.</td>
                        </tr>
                        <tr>
                            <td>minDate</td>
                            <td>Date</td>
                            <td>null</td>
                            <td>The minimum selectable date.</td>
                        </tr>
                        <tr>
                            <td>maxDate</td>
                            <td>Date</td>
                            <td>null</td>
                            <td>The maximum selectable date.</td>
                        </tr>
                        <tr>
                            <td>disabledDates</td>
                            <td>Array&lt;Date&gt;</td>
                            <td>null</td>
                            <td>Array with dates that should be disabled (not selectable).</td>
                        </tr>
                        <tr>
                            <td>disabledDays</td>
                            <td>Array&lt;number&gt;</td>
                            <td>null</td>
                            <td>Array with weekday numbers that should be disabled (not selectable).</td>
                        </tr>
                        <tr>
                            <td>monthNavigator</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether the month should be rendered as a dropdown instead of text.</td>
                        </tr>
                        <tr>
                            <td>yearNavigator</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether the year should be rendered as a dropdown instead of text.</td>
                        </tr>                        
                        <tr>
                            <td>yearRange</td>
                            <td>string</td>
                            <td>null</td>
                            <td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).</td>
                        </tr>
                        <tr>
                            <td>showTime</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display timepicker.</td>
                        </tr>
                        <tr>
                            <td>hourFormat</td>
                            <td>string</td>
                            <td>24</td>
                            <td>Specifies 12 or 24 hour format.</td>
                        </tr>
                        <tr>
                            <td>locale</td>
                            <td>object</td>
                            <td>null</td>
                            <td>An object having regional configuration properties for the calendar.</td>
                        </tr>
                        <tr>
                            <td>timeOnly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display timepicker only.</td>
                        </tr>
                        <tr>
                            <td>dataType</td>
                            <td>string</td>
                            <td>date</td>
                            <td>Type of the value to write back to ngModel, default is date and alternative is string.</td>
                        </tr>
                        <tr>
                            <td>required</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>showSeconds</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to show the seconds in time picker.</td>
                        </tr>
                        <tr>
                            <td>stepHour</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Hours to change per step.</td>
                        </tr>
                        <tr>
                            <td>stepMinute</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Minutes to change per step.</td>
                        </tr>
                        <tr>
                            <td>stepSecond</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Seconds to change per step.</td>
                        </tr>
                        <tr>
                            <td>utc</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to convert date to UTC on selection.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onSelect</td>
                            <td>value: Selected value
                            </td>
                            <td>Callback to invoke when a date is selected.</td>
                        </tr>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Blur event
                            </td>
                            <td>Callback to invoke on blur of input field.</td>
                        </tr>
                        <tr>
                            <td>onFocus</td>
                            <td>event: Focus event
                            </td>
                            <td>Callback to invoke on focus of input field.</td>
                        </tr>
                        <tr>
                            <td>onClose</td>
                            <td>event: Close event
                            </td>
                            <td>Callback to invoke when datepicker panel is closed.</td>
                        </tr>
                        <tr>
                            <td>onInput</td>
                            <td>event: Input event
                            </td>
                            <td>Callback to invoke when input field is being typed.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-calendar</td>
                            <td>Wrapper of input element</td>
                        </tr>
                        <tr>
                            <td>ui-inputtext</td>
                            <td>Input element</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/calendar" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;div class="ui-g"&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Basic&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date1"&gt;&lt;/p-calendar&gt; &#123;&#123;date1|date&#125;&#125;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Spanish&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy"&gt;&lt;/p-calendar&gt; &#123;&#123;date2|date&#125;&#125;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Icon&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date3" [showIcon]="true"&gt;&lt;/p-calendar&gt; &lt;span style="margin-left:35px"&gt;&#123;&#123;date3|date&#125;&#125;&lt;/span&gt;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Min-Max&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"&gt;&lt;/p-calendar&gt; &#123;&#123;date4|date&#125;&#125;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Disable Days&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"&gt;&lt;/p-calendar&gt; &#123;&#123;date5|date&#125;&#125;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Navigators&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"&gt;&lt;/p-calendar&gt; &#123;&#123;date6|date&#125;&#125;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Time&lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date7" [showTime]="true"&gt;&lt;/p-calendar&gt; &#123;&#123;date7&#125;&#125;
    &lt;/div&gt;
    
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;h3&gt;Time Only &lt;/h3&gt;
        &lt;p-calendar [(ngModel)]="date8" [timeOnly]="true"&gt;&lt;/p-calendar&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Inline &#123;&#123;date8|date&#125;&#125;&lt;/h3&gt;
&lt;p-calendar [(ngModel)]="date9" [inline]="true"&gt;&lt;/p-calendar&gt; 
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class CalendarDemo &#123;

    date1: Date;

    date2: Date;

    date3: Date;

    date4: Date;

    date5: Date;

    date6: Date;
    
    date7: Date;
    
    date8: Date;
    
    date9: Date;
    
    minDate: Date;
    
    maxDate: Date;
    
    es: any;
    
    invalidDates: Array&lt;Date&gt;
        
    ngOnInit() &#123;
        this.es = &#123;
            firstDayOfWeek: 1,
            dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
            dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
            dayNamesMin: [ "D","L","M","X","J","V","S" ],
            monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
            monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ]
        &#125;
        
        this.tr = &#123;
            firstDayOfWeek : 1
        &#125;
        
        let today = new Date();
        let month = today.getMonth();
        let year = today.getFullYear();
        let prevMonth = (month === 0) ? 11 : month -1;
        let prevYear = (prevMonth === 11) ? year - 1 : year;
        let nextMonth = (month === 11) ? 0 : month + 1;
        let nextYear = (nextMonth === 0) ? year + 1 : year;
        this.minDate = new Date();
        this.minDate.setMonth(prevMonth);
        this.minDate.setFullYear(prevYear);
        this.maxDate = new Date();
        this.maxDate.setMonth(nextMonth);
        this.maxDate.setFullYear(nextYear);
        
        let invalidDate = new Date();
        invalidDate.setDate(today.getDate() - 1);
        this.invalidDates = [today,invalidDate];
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>